<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 65%"
      max-height="720px"
      ref="multipleTable" v-loading="loading">
      <el-table-column
        type="selection"
        width="55px">
      </el-table-column>
      <el-table-column
        prop="num"
        label="编号"
        width="55px">
      </el-table-column>
      <el-table-column
        prop="typeName"
        label="分类">
      </el-table-column>
      <el-table-column
        label="使用量">
        <template slot-scope="scope">
          <el-tag type="warning"
                  style="margin: 2px"
                  v-bind:key="scope.row.clickRate">
            {{ scope.row.clickRate }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="发布时间"
        prop="createTime">

      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <TypeUpdate style="float: left;margin: 2px;"
                      :tid="scope.row.tid"
                      :type-name="scope.row.typeName"></TypeUpdate>
          <TypeDelete style="float: left;margin: 2px;"
                      :type-name="scope.row.typeName"
                      :click-rate="scope.row.clickRate"></TypeDelete>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, prev, pager, next, jumper"
      :total="typeNum"
      style="padding-left: 0; margin-top: 10px;"
      v-on:current-change="currentPage">
    </el-pagination>
  </div>
</template>

<script>
import qs from 'qs'
import TypeUpdate from "./TypeUpdate";
import TypeDelete from "./TypeDelete";
export default {
  name: "ShowTypeMessage",
  components:{
    TypeDelete,
    TypeUpdate,
  },
  data(){
    return{
      tableData:[],
      start:0,
      typeNum:0,
      loading:true,
    }
  },
  methods:{
    currentPage(index){
      this.start=(index-1)*10;
      this.flashType();
    },
    flashType(){
      this.tableData=[];
      this.axios.post("/blog/queryAllBlogType",qs.stringify({
        start:this.start,
      })).then((response)=>{
        this.onloading();
        for(let i=0; i<response.data.length; i++){
          let type={
            num:1,
            typeName:'',
            clickRate:0,
            createTime:'',
            tid:'',
          }
          type.num=i+1;
          type.typeName=response.data[i].typeName;
          type.clickRate=response.data[i].clickRate;
          type.createTime=response.data[i].createTime;
          type.tid=response.data[i].tid;
          this.tableData.push(type);
        }
      });
      this.axios.post("/blog/queryAllBlogType",qs.stringify({
        start:-1,
      })).then((response)=>{
        this.typeNum=response.data.length;
      })
    },
    onloading(){
      setTimeout(()=>{
        this.loading=false;
      },500);
    }
  },
  mounted() {
    this.flashType();
  }
}
</script>

<style scoped>

</style>
